<template>
  <JVxeTable
    ref="tableRef"
    toolbar
    row-number
    row-selection
    keep-source
    :height="484"
    :loading="loading"
    :dataSource="dataSource"
    :columns="columns"
    :pagination="pagination"
    style="margin-top: 8px"
    @page-change="handlePageChange"
  >
    <template #toolbarSuffix>
      <a-button @click="handleTableGet">获取数据</a-button>
    </template>
  </JVxeTable>
</template>

<script lang="ts" setup>
  import { reactive, ref } from "vue"
  // noinspection ES6UnusedImports
  import { Popconfirm } from "ant-design-vue"
  import { JVxeColumn, JVxeTableInstance, JVxeTypes } from "/@/components/jeecg/JVxeTable/types"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { random } from "lodash-es"
  import { buildUUID } from "/@/utils/uuid"
  import { uploadUrl } from "/@/api/common/api"

  const tableRef = ref<JVxeTableInstance>()
  const { createMessage } = useMessage()
  const loading = ref(false)
  const columns = ref<JVxeColumn[]>([
    {
      title: "下拉框_字典表搜索",
      key: "select_dict_search",
      type: JVxeTypes.selectDictSearch,
      width: 200,
      async: true, // 异步搜索，默认为 true
      // 字典表配置信息：数据库表名,显示字段名,存储字段名
      dict: "sys_user,realname,username",
      tipsContent: "请输入查询条件",
    },
    {
      title: "JPopup",
      key: "popup",
      type: JVxeTypes.popup,
      width: 180,
      popupCode: "demo",
      // field: 'name,sex,age',
      // orgFields: 'name,sex,age',
      // destFields: 'popup,popup_sex,popup_age',
      fieldConfig: [
        { source: "name", target: "popup" },
        { source: "sex", target: "popup_sex" },
        { source: "age", target: "popup_age" },
      ],
    },
    {
      title: "JP-性别",
      key: "popup_sex",
      type: JVxeTypes.select,
      dictType: "sys_user_sex",
      disabled: true,
      width: 100,
    },
    {
      title: "JP-年龄",
      key: "popup_age",
      type: JVxeTypes.normal,
      width: 80,
    },
    {
      title: "用户选择",
      key: "userSelect",
      type: JVxeTypes.userSelect,
      width: 240,
    },
    {
      title: "部门选择",
      key: "departSelect",
      type: JVxeTypes.departSelect,
      width: 240,
    },
    {
      title: "单选",
      key: "radio",
      type: JVxeTypes.radio,
      width: 130,
      options: [
        { text: "男", value: "1" },
        { text: "女", value: "2" },
      ],
      // 允许清除选择（再点一次取消选择）
      allowClear: false,
    },
    {
      title: "上传",
      key: "upload",
      type: JVxeTypes.upload,
      width: 180,
      btnText: "点击上传",
      token: true,
      responseName: "message",
      action: uploadUrl,
    },
    {
      title: "图片上传",
      key: "image",
      type: JVxeTypes.image,
      width: 180,
      maxCount: 6,
    },
    {
      title: "文件上传",
      key: "file",
      type: JVxeTypes.file,
      width: 180,
      maxCount: 2,
    },
    {
      title: "进度条",
      key: "progress",
      type: JVxeTypes.progress,
      minWidth: 320,
    },
  ])
  const dataSource = ref<any[]>([])
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    pageSizeOptions: ["10", "20", "30", "100", "200"],
    total: 1000,
  })

  randomPage(pagination.current, pagination.pageSize, true)

  // 当分页参数变化时触发的事件
  function handlePageChange(event) {
    // 重新赋值
    pagination.current = event.current
    pagination.pageSize = event.pageSize
    // 查询数据
    randomPage(event.current, event.pageSize, true)
  }

  /** 获取值，忽略表单验证 */
  function handleTableGet() {
    const values = tableRef.value!.getTableData()
    console.log("获取值:", { values })
    createMessage.success("获取值成功，请看控制台输出")
  }

  /* 随机生成分页数据 */
  function randomPage(current, pageSize, $loading = false) {
    if ($loading) {
      loading.value = true
    }
    let begin = Date.now()
    let values: any[] = []
    for (let i = 0; i < pageSize; i++) {
      let radio = random(0, 2)
      values.push({
        id: buildUUID(),
        select_dict_search: ["admin", "", "jeecg"][random(0, 2)],
        progress: random(0, 100),
        radio: radio ? radio.toString() : null,
      })
    }
    dataSource.value = values
    let end = Date.now()
    let diff = end - begin
    if ($loading && diff < pageSize) {
      setTimeout(() => (loading.value = false), pageSize - diff)
    }
  }
</script>
